<template>
  <van-grid :gutter="10" column-num="2" icon-size="56" :border="true">
    <van-grid-item
        v-for="(item, index) in manageList"
        :key="index"
        :icon="item.icon"
        :text="item.name"
        :icon-color="item.color"
        @click="handleClick(item)"
        class="grid-item"
    >
    </van-grid-item>
  </van-grid>
</template>
<script setup lang="ts" name="Home">
import {color} from "echarts";
import {useRouter} from "vue-router";

const router = useRouter();
const manageList = [
  {
    name: "工作类型",
    color: "#2d8cf0",
    icon: 'hot',
    type: "type",
    key: 1,
  },
  {
    name: "问题类型",
    color: "#f56c6c",
    type: "type",
    icon: 'question',
    key: 2,
  },
  {
    name: "果树类型",
    color: "#67c23a",
    type: "type",
    icon: 'cluster',
    key: 3,
  },
];

function handleClick(item: (typeof manageList)[0]) {
  if (item.type == "type") {
    router.push({path: "/manage/type", query: {key: item.key}});
  }
}
</script>
<style>
.grid-item:hover {
  cursor: pointer;
}
</style>
